<template>
  <div class="category-index">
    <!--    面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 轮播图组件-->
      <BannerList/>

    <!-- 中间全部分类列表-->
    <div class="category-list">
      <h3>全部分类</h3>
      <ul>
        <li v-for="i in categoryData.children" :key="i.id">
          <RouterLink :to="`/category/sub/${i.id}`">
            <img :src="i.picture" alt="图像"/>
            <p>{{ i.name }}</p>
          </RouterLink>
        </li>
      </ul>
    </div>

    <!-- 底部Children详细分类列表-->
    <div class="sub-category-list" v-for="item in categoryData.children" :key="item.id">
      <h3>- {{ item.name }} -</h3>
      <div class="body">
        <GoodsIndex v-for="good in item.goods" :goods="good" :key="good.id"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import BannerList from "@/components/banner/BannerList.vue";
import GoodsIndex from '@/components/goods/GoodsIndex.vue'
import {useCategory} from './composables/useCategory'
const {categoryData} = useCategory()

</script>


<style scoped lang="scss">
.category-index {
  display: flex;
  flex-direction: column;
  max-width: 1240px;
  margin: 0 auto;
  background-color: #ececec;

  .breadcrumb {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-shadow:0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;

  }

  .category-list {
    display: flex;
    flex-direction: column;
    height: 220px;
    margin-top: 20px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    h3 {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }

    ul {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 0 10px;

      li {
        width: 160px;
        height: 160px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        a {
          img {
            width: 100%;
            height: 100px;
          }

          p {
            line-height: 40px;
            text-align: center;
            font-size: 16px;
          }

          &:hover {
            color: #27ba9b;
            cursor: pointer;
            transform: scale(1.1); /* 鼠标悬停时放大1.1倍 */
          }
        }

      }
    }
  }

  .sub-category-list {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    h3 {
      width: 100%;
      height: 50px;
      font-size: 20px;
      line-height: 50px;
      text-align: center;
      color: #9a9a9a;
    }

    .body {
      display: flex;
      justify-content: space-around;
      padding: 0 40px 30px;
    }
  }

}

</style>